<template>

  <h1>{{ obj.a }}</h1>
  <h1>{{a}}</h1>
  <button @click="handleEditObj">按钮</button>
  <button @click="handleEditA">按钮2</button>

</template>

<script>
import { ref, toRef } from "vue";
export default {
  setup() {
    let obj = { a: "123" };

    let a = toRef(obj, "a");
    console.log("a: ", a);

    // let state = ref(obj.name); 方法1 会改变 / ？ 简单类型

    // ref -> 复制 修改响应式数据 不影响以前 更新UI
    // toRef -> 引用 修改响应式数据 影响以前 不更新UI

    function handleEditObj() {
      obj.a += "123";
    }
    function handleEditA() {
      a.value += "FFF"; // 更改后原始数据受影响 不会更新UI
      console.log("a: ", a);
    }

    return { obj, handleEditObj, handleEditA, a };
  },
};
</script>

<style>
</style>